<template>
  <div class="header">
    <div class="header-container">
      <!-- Logo -->
      <div class="header-logo">
        <n-image
          class="cursor-pointer h-[50px] my-[5px]"
          @click="goHome"
          :preview-disabled="true"
          src='https://oss.jxwazx.cn/logo-pink.png'
        />
      </div>

      <!-- Desktop Menu -->
      <div class="header-menu desktop-menu">
        <n-menu
          v-model:value="activeKey"
          :on-update:value="selectItem"
          mode="horizontal"
          :options="menuOptions"
        />
      </div>

      <!-- Mobile Menu Button -->
      <div class="mobile-menu-button">
        <n-button
          @click="showMobileMenu = !showMobileMenu"
          text
          class="text-2xl"
        >
          <n-icon>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
              <path v-if="!showMobileMenu" fill-rule="evenodd" d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z" clip-rule="evenodd" />
              <path v-else fill-rule="evenodd" d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z" clip-rule="evenodd" />
            </svg>
          </n-icon>
        </n-button>
      </div>
    </div>

    <!-- Mobile Menu Drawer -->
    <n-drawer
      v-model:show="showMobileMenu"
      :width="280"
      placement="left"
      :trap-focus="false"
    >
      <n-drawer-content :header-style="{ display: 'none' }" :body-content-style="{ padding: '0', display: 'flex', flexDirection: 'column', height: '100%' }">
        <n-menu
          v-model:value="activeKey"
          :on-update:value="selectMobileItem"
          :options="menuOptions"
          :accordion="true"
          class="mobile-menu"
          style="flex: 1; overflow-y: auto;"
        />
        <div class="mobile-menu-footer">
          <n-button
            @click="showMobileMenu = false"
            text
            block
            class="collapse-btn"
          >
            <n-icon size="20" style="margin-right: 8px">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                <path fill-rule="evenodd" d="M7.72 12.53a.75.75 0 010-1.06l7.5-7.5a.75.75 0 111.06 1.06L9.31 12l6.97 6.97a.75.75 0 11-1.06 1.06l-7.5-7.5z" clip-rule="evenodd" />
              </svg>
            </n-icon>
            收起侧边栏
          </n-button>
        </div>
      </n-drawer-content>
    </n-drawer>
  </div>
</template>

<script lang="ts" setup>
import {h, ref, Component, computed, watchEffect} from 'vue'
import {NIcon, NDrawer, NDrawerContent, NButton} from 'naive-ui'
import type {MenuOption} from 'naive-ui'
import {useRouter, useRoute} from 'vue-router'
import {meta} from "@/routes";

const router = useRouter()
const route = useRoute();

const activeKey = ref<string | null>(null)
const showMobileMenu = ref(false)

watchEffect(() => {
  activeKey.value = route.path;
});

function renderIcon(icon: Component) {
  return () => h(NIcon, null, {default: () => h(icon)})
}

function selectItem(key: string, item: MenuOption) {
  activeKey.value = key
  router.push(key)
  console.log(key, item)
}

function selectMobileItem(key: string, item: MenuOption) {
  activeKey.value = key
  router.push(key)
  showMobileMenu.value = false
  console.log(key, item)
}

const menuOptions = computed(() => {
  const routes = router.getRoutes();

  // 1. Filter for top-level menu items (not hidden, has children)
  const topLevelRoutes = routes.filter(route =>
      route.meta && !(route.meta as meta).hidden && route.children && route.children.length > 0
  );

  // 2. Map these routes to the menu structure
  return topLevelRoutes.map(parentRoute => {
    const parentMeta = parentRoute.meta as meta;

    // 3. Map the children of the route to the inner menu items (filter out hidden routes)
    const childMenuOptions = (parentRoute.children || [])
      .filter(childRoute => {
        const childMeta = childRoute.meta as meta;
        return !childMeta?.hidden; // Filter out routes with hidden: true
      })
      .map(childRoute => {
        const childMeta = childRoute.meta as meta;
        return {
          label: childMeta?.title || childRoute.name?.toString() || '',
          key: `${parentRoute.path}/${childRoute.path}`,
          icon: childMeta?.icon ? renderIcon(childMeta.icon) : undefined,
        };
      });

    // 4. Construct the final structure with the group wrapper
    const menuOption: MenuOption = {
      label: parentMeta.title || '',
      key: (parentRoute.name as string) || parentRoute.path,
      icon: parentMeta.icon ? renderIcon(parentMeta.icon) : undefined,
      children: [
        {
          type: 'group',
          label: parentMeta.title || '',
          key: `${(parentRoute.name as string) || parentRoute.path}-group`,
          children: childMenuOptions
        }
      ]
    };
    return menuOption;
  });
});

function goHome() {
  selectItem('/', {})
}

/* export default defineComponent({
  setup() {
    return {
      activeKey: ref<string | null>(null),
      selectItem,
      menuOptions
    }
  }
}) */
</script>

<style scoped lang="less">
.header {
  height: 62px;
  width: 100%;
  background-color: var(--n-color);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: var(--z-sticky, 1020);

  .header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 1rem;
    max-width: 1280px;
    margin: 0 auto;
  }

  .header-logo {
    flex-shrink: 0;
  }

  .headerImg {
    margin: 5px 0;
  }

  .header-menu {
    flex: 1;
    margin-left: 2rem;
  }

  // Mobile menu button - hidden on desktop
  .mobile-menu-button {
    display: none;
  }

  // Mobile styles
  @media (max-width: 768px) {
    .desktop-menu {
      display: none;
    }

    .mobile-menu-button {
      display: block;
    }

    .header-container {
      padding: 0 1rem;
    }
  }

  // Tablet styles
  @media (min-width: 769px) and (max-width: 1024px) {
    .header-menu {
      margin-left: 1rem;
    }
  }
}

// Mobile drawer menu styles
:deep(.n-drawer) {
  .n-drawer-body-content-wrapper {
    padding: 0 !important;
  }
}

.mobile-menu {
  border-right: none !important;
  padding-top: 16px;
  
  :deep(.n-menu-item) {
    margin: 0;
    padding-left: 12px !important;
  }
  
  :deep(.n-menu-item-content) {
    padding-left: 0 !important;
  }
  
  :deep(.n-submenu) {
    .n-menu-item-content {
      padding-left: 12px !important;
    }
    
    .n-menu-item {
      padding-left: 24px !important;
    }
  }
  
  // Remove group label padding and styling
  :deep(.n-menu-item-group-title) {
    display: none;
  }
  
  // Adjust submenu children to be more compact
  :deep(.n-submenu-children) {
    .n-menu-item {
      padding-left: 32px !important;
      font-size: 14px;
    }
  }
}

.mobile-menu-footer {
  border-top: 1px solid var(--n-divider-color);
  padding: 8px;
  
  .collapse-btn {
    justify-content: flex-start;
    padding: 12px;
    color: var(--n-text-color-2);
    font-size: 14px;
    
    &:hover {
      color: var(--n-text-color-1);
      background-color: var(--n-button-color-hover);
    }
  }
}
</style>
